{include file="public/header"/}
</head>
<body>
<style>
.layui-form-selected dl{z-index:999999!important;}
</style>
<div class="layui-form">
  <div class="layui-fluid pd83">
    <div class="layui-card">
      <div class="layui-card-body pcf30">
          <div class="layui-form-item">
              <label class="layui-form-label"><b class="pcfts">*</b> 字段标题</label>
              <div class="layui-input-inline pcfcms_layui-input-inline">
                  <input type="text" name="title" value="" lay-verify="required" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"><b class="pcfts">*</b> 字段名称</label>
            <div class="layui-input-inline pcfcms_layui-input-inline">
                <input type="text" value="" name="name" lay-verify="required|check_name" placeholder="只允许字母、数字和下划线的任意组合" class="layui-input" onkeyup="this.value=this.value.replace(/[^0-9a-zA-Z_]/g,'');" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^0-9a-zA-Z_]/g,''));">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"><b class="pcfts">*</b> 字段类型</label>
            <div class="layui-input-inline">
              <select name="dtype" id="dtype" lay-filter="dtype" lay-verify="check_dtype">
                {volist name='$fieldtype_list' id='vo'}
                <option value="{$vo.name}" data-ifoption="{$vo.ifoption|default=0}">{$vo.title}</option>
                {/volist}
              </select>
            </div>
          </div>
          <div class="layui-form-item none" id="dl_dfvalue">
            <label class="layui-form-label" id="label_dfvalue"><b class="pcfts">*</b> 默认值</label>
            <div class="layui-input-inline pcfcms_layui-input-inline">
                <textarea rows="5" cols="60" id="dfvalue" name="dfvalue" lay-verify="check_dfvalue" class="layui-textarea" placeholder="如果定义字段类型为下拉框、单选项、多选项时，此处填写被选择的项目(用“,”分开，如“男,女,人妖”)" ></textarea>
            </div>
          </div>
          <div class="layui-form-item" id="IsScreening">
            <label class="layui-form-label">应用于筛选</label>
            <div class="layui-input-inline">
                <input type="checkbox" lay-filter="is_screening" lay-skin="switch" lay-text="是|否">
                <input type="hidden" name="is_screening" value="0"/>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" id="select_title">指定栏目</label>
            <div class="layui-input-inline">
              <select id="typeid" lay-verify="check_typeid" multiple="true" >
                <option value="0" selected="false">—指定所有栏目—</option>
                {$select_html|raw}
              </select>
            </div>
          </div>
          <input type="hidden" name="channel_id" id="channel_id" value="{$channel_id|default=''}">
      </div>
      <div class="pcfclear"></div>
    </div>
  </div>
  <div class="submit-info text-center">
      <button class="layui-btn" lay-submit lay-filter="formSubmit">确认提交</button>
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
  </div>
</div>
{include file="public/footer"/}
<script>
  layui.use(['layer', 'form','element'], function () {
      var $ = layui.$,
      layer = layui.layer,
      form = layui.form;
      form.render();

      dtype_change($('select[name=dtype]'));
      function dtype_change(obj) {
          var dtype = $(obj).val();
          $('#dl_dfvalue').hide();
          if (0 <= $.inArray(dtype,['text','datetime','multitext','switch','img','imgs','htmltext','decimal','float','int'])) {
            $('#dl_dfvalue').hide();
          } else {
            $('#dl_dfvalue').show();
          }
          if (0 <= $.inArray(dtype, ['checkbox','multitext','radio','select','int','float','decimal'])) {
              $('#IsScreening').show();
          } else {
              $('#IsScreening').hide();
              $('#select_title').html('指定栏目');
          }
      }

      // 监听开关
      form.on('switch(is_screening)', function(data){
        var elemId = data.elem.attributes['lay-filter']['nodeValue'];
        if (data.elem.checked) {
          this.value = 1;
          $('#select_title').html('<b class="pcfts">*</b> 指定栏目');
          $('#typeid').find('option:first').attr('disabled', true).addClass('none');
        } else {
          this.value = 0;
          $('#select_title').html('指定栏目');
          $('#typeid').find('option:first').attr('disabled', false).removeClass('none');
        }
        $("input[name='"+elemId+"']").val(this.value);
      });

      form.verify({
        check_name: function(value, item){
          var name = $('input[name="name"]').val();
          if (/^[0-9]+$/.test(name)) {
              return '字段名称不能纯数字！';
          } else if (/^((_+)|(\d+))$/.test(value) || !/^(\w+)$/.test(value)) {
              return '字段名称格式不正确！';
          } else if(/^type/.test(value)){
              return '字段名称不允许以type开头！';
          }
        },
        check_dtype: function(value, item){
          if ('' == value || undefined == value) {
              return '请选择字段类型！';
          }
        },
        check_dfvalue: function(value, item){
          var ifoption = $('#dtype').find('option:selected').data('ifoption');
          if (1 == ifoption) {
              if ($.trim($('#dfvalue').val()) == '') {
                  $('#dfvalue').focus();
                  return '默认值不能为空！';
              }
              var tag = '|';
              if($('#dfvalue').val().indexOf(tag) != -1){
                  $('#dfvalue').focus();
                  return '默认值不能输入 | 符号！';
          　　}
          }
        },
        check_typeid: function(value, item){
          if (0 >= parseInt($('#typeid').find('option:selected').length)) {
              return '请选择指定栏目！';
          }
          if (1 == parseInt($('input[name=is_screening]').val())) {
              if (0 == parseInt($('#typeid').find('option:selected').val())) {
                  if (1 >= $('#typeid').val().length) {
                      return '字段应用于筛选时，栏目必须指定一个或多个！';
                  }
              }
          }
        }
      });

      // 字段类型
      form.on('select(dtype)', function(data){
          dtype_change(data.elem);
          form.render();
      });

      // 监听提交
      form.on('submit(formSubmit)', function(data){
          layer.msg('正在处理请勿刷新页面', {icon: 16,shade: 0.01,time:3600000});
          data.field.typeids = $('#typeid').val();
          $.ajax({
              type : 'post',
              url : "{:url('/field/channel_add')}",
              data : data.field,
              dataType : 'json',
              success : function(res){
                  layer.closeAll('loading');
                  if(res.status){
                      layer.msg(res.msg, {icon: 1, time: 1000}, function(){
                          parent.window.location.href = res.url;
                      });
                  }else{
                      layer.msg(res.msg, {icon: 2, time: 1000});
                  }
              },
              error: function(e){
                  layer.closeAll('loading');
                  layer.msg("未知错误，操作中断！", {icon: 2, time: 1000});
              }
          });
      });
      
  });
</script>
